<template>
  <common-page :title="title" :is-padding="true">
    <el-button slot="header" @click="$emit('close')">返 回</el-button>
    <div slot="content" class="execution-history-overview-wrap">
      <div class="grid-column-2">
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="客户端IP Top5"
            :dataset="dataSet1"
          ></title-chart>
        </div>
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="数据源(库) Top5"
            :dataset="dataSet2"
          ></title-chart>
        </div>
      </div>
      <div class="column-divided"></div>
      <div class="grid-column-2">
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="数据源(表) Top5"
            :dataset="dataSet3"
          ></title-chart>
        </div>
        <div class="chart-container">
          <title-chart
            type="chart-cirque"
            title="重要数据 Top5"
            :dataset="dataSet4"
          ></title-chart>
        </div>
      </div>
    </div>
  </common-page>
</template>

<script>
import mixin from "@/views/datascan/ranking/report/components/mixin";
import { getPercent } from "@/utils/util";
export default {
  name: "ReportSensitiveType",
  mixins: [mixin],
  data() {
    return {
      dataSet1: {
        dimensions: ["sourceIp", "spreadCount"],
        source: [],
      },
      dataSet2: {
        dimensions: ["dbName", "spreadCount"],
        source: [],
      },
      dataSet3: {
        dimensions: ["tableName", "spreadCount"],
        source: [],
      },
      dataSet4: {
        dimensions: ["sensitiveLabel", "spreadCount"],
        source: [],
        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["spreadCount"]}</div>`;
            },
          },
        },
      },
    };
  },
  computed: {
    title: function () {
      return `${this.reportData.data.typeName}的报告`;
    },
  },
  methods: {
    // 客户端IP Top5
    getDataSet1() {
      this.getRankingStat("sensitiveTypes.typeName,sourceIp", 5).then((res) => {
        this.dataSet1.source = res;
      });
    },

    // 数据源(库) Top5
    getDataSet2() {
      this.getRankingStat("sensitiveTypes.typeName,dbIp,dbPort,dbName", 5).then(
        (res) => {
          this.dataSet2.source = res;
        }
      );
    },

    // 数据源(表) Top5
    getDataSet3() {
      this.getRankingStat(
        "sensitiveTypes.typeName,dbIp,dbPort,dbName,tableName",
        5
      ).then((res) => {
        this.dataSet3.source = res.reduce((r, c) => {
          r.push({
            ...c,
            tableName: `${c.dbName}.${c.tableName}`,
          });
          return r;
        }, []);
      });
    },

    // 敏感标签 Top5
    getDataSet4() {
      this.getRankingStat("sensitiveTypes.typeName,sensitiveLabel", 5).then(
        (res) => {
          this.dataSet4.source = res;
          let _this = this;
          this.dataSet4.option.legend.formatter = function (name) {
            let nameData = null;
            let countnum = null;
            let count = null;
            _this.dataSet4.source.forEach((item) => {
              countnum = countnum + item.spreadCount;
              if (item.sensitiveLabel == name) {
                nameData = item.sensitiveLabel + " | ";
                count = " " + item.spreadCount;
              }
            });
            nameData = nameData + getPercent(count, countnum) + count;
            return nameData;
          };
        }
      );
    },

    getParams() {
      return {
        "sensitiveTypes.typeName": [this.reportData.data.typeName],
      };
    },
  },
  mounted() {
    this.getDataSet1();
    this.getDataSet2();
    this.getDataSet3();
    this.getDataSet4();
  },
};
</script>

<style scoped lang="scss">
.execution-history-overview-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .chart-container {
    height: 400px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
  }

  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
}
</style>
